import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import Header from '../pages/header'
import Banner from '../pages/banner'
import axios from 'axios'
import './index.css'
export default function Cateagory() {
    var params = useParams()
    var [goodsDetail, setGoodsDetail] = useState([]);

    useEffect(() => {
        axios.get(`https://apipc-xiaotuxian-front.itheima.net/category?id=${params.id}`).then(res => {
            if (res.data.msg == '操作成功') {
                goodsDetail = res.data.result;
                console.log( res.data.result);
                setGoodsDetail([...goodsDetail]);
            }

        })
    }, [params.id]);
    return <div >
        <Header></Header>
        <Banner></Banner>
        <div id="wrap">
            <div className="category">
                <div className="container">
                    <div className="category_list">
                        <h3>全部分类</h3>
                        <ul>
                            {
                                goodsDetail.map((i, index) => {
                                    return <li >
                                        <a href="javascript:;">
                                            <img src="" alt="" />
                                            <p>{i.name}</p>
                                        </a>
                                    </li>
                                })
                            }
                        </ul>
                    </div>

                    <div className="category_goods">
                        <div className="container">
                            <div className="head">
                                <h3>-  -</h3>
                                <p>温暖柔软，品质之选</p>
                                <span className="more">查看全部&gt;</span>
                            </div>
                            <ul className="content">
                                <li >
                                    <img src='' alt="" />
                                    <p></p>
                                    <p></p>
                                    <p>￥</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div >
}